<template>
  <div>
    <el-form ref="form" label-width="100px" size="small" :model="form" :rules="rules" :disabled="clickName == 'view'">
      <!--业务问题-->
      <el-form-item :label="$t('largeModel.businessProblem')+':'" prop="businessProblem" v-if="configCur.type ==2">
        <el-switch v-model="form.businessProblem"></el-switch>
      </el-form-item>
      <!--大模型-->
      <el-form-item :label="$t('largeModel.largeModel')+':'" prop="largeModel" v-if="form.businessProblem || configCur.type !=2">
        <el-select
          v-model="form.largeModel"
          clearable
          :placeholder="$t('largeModel.largeModelTips')"
          filterable="true"
        >
          <el-option
            v-for="item in largeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--温度-->
      <el-form-item :label="$t('largeModel.temperature')+':'" prop="temperature" v-if="form.businessProblem || configCur.type !=2">
        <el-slider
          v-model="form.temperature"
          :marks="temperatureMarks"
          :max="2"
          :step="0.1"
        >
        </el-slider>
      </el-form-item>
      <!--top-p-->
      <el-form-item label="Top-p:" prop="TopP" v-if="form.businessProblem || configCur.type !=2">
        <el-slider
          v-model="form.TopP"
          :marks="topPMarks"
          :max="1"
          :step="0.1"
        >
        </el-slider>
      </el-form-item>
      <!--提示词-->
      <el-form-item :label="$t('largeModel.tipWord')+':'" prop="tipWord" v-if="form.businessProblem || configCur.type !=2">
        <el-select
          v-model="form.tipWord"
          clearable
          :placeholder="$t('largeModel.largeModelTips')"
          filterable="true"
        >
          <el-option
            v-for="item in promptList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <el-link
          type="primary"
          :underline="false"
          @click="addTipWord"
          style="margin-left: 10px"
          v-show="clickName != 'view'"
        >
          {{$t('aiccCommon.add')}}
        </el-link>
      </el-form-item>
      <!--生成模式-->
      <el-form-item
        :label="$t('largeModel.mode')+':'"
        prop="mode"
        v-if="configCur.type ==2 && form.businessProblem && modeList.length > 0"
      >
        <el-select
          v-model="form.mode"
          clearable
          :placeholder="$t('largeModel.selectModeTip')"
          filterable="true"
        >
          <el-option
            v-for="item in modeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
          </el-option>
        </el-select>
      </el-form-item>



      <!--非业务问题-->
      <el-form-item :label="$t('largeModel.notBusinessProblem')+':'" prop="notBusinessProblem" v-if="configCur.type ==2">
        <el-switch v-model="form.notBusinessProblem"></el-switch>
      </el-form-item>
      <!--大模型-->
      <el-form-item :label="$t('largeModel.largeModel')+':'" prop="notLargeModel" v-if="configCur.type ==2 && form.notBusinessProblem">
        <el-select
          v-model="form.notLargeModel"
          clearable
          :placeholder="$t('largeModel.largeModelTips')"
          filterable="true"
        >
          <el-option
            v-for="item in notLargeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--温度-->
      <el-form-item :label="$t('largeModel.temperature')+':'" prop="notTemperature" v-if="configCur.type ==2 && form.notBusinessProblem">
        <el-slider
          v-model="form.notTemperature"
          :marks="temperatureMarks"
          :max="2"
          :step="0.1"
        >
        </el-slider>
      </el-form-item>
      <!--top-p-->
      <el-form-item label="Top-p:" prop="notTopP" v-if="configCur.type ==2 && form.notBusinessProblem">
        <el-slider
          v-model="form.notTopP"
          :marks="topPMarks"
          :max="1"
          :step="0.1"
        >
        </el-slider>
      </el-form-item>
      <!--提示词-->
      <el-form-item :label="$t('largeModel.tipWord')+':'" prop="notTipWord" v-if="configCur.type ==2 && form.notBusinessProblem">
        <el-select
          v-model="form.notTipWord"
          clearable
          :placeholder="$t('largeModel.selectTipWordTips')"
          filterable="true"
        >
          <el-option
            v-for="item in promptList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-link
          type="primary"
          :underline="false"
          @click="addTipWord"
          style="margin-left: 10px"
          v-show="clickName != 'view'"
        >
          {{$t('aiccCommon.add')}}
        </el-link>
      </el-form-item>
      <!--生成模式-->
      <el-form-item
        :label="$t('largeModel.mode')+':'"
        prop="notMode"
        v-if="configCur.type ==2 && form.notBusinessProblem && notModeList.length > 0"
      >
        <el-select
          v-model="form.notMode"
          clearable
          :placeholder="$t('largeModel.selectModeTip')"
          filterable="true"
        >
          <el-option
            v-for="item in notModeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            <span style="float: left">{{ item.name }}</span>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
              <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
            </el-tooltip>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <AiccDrawer
      ref="addPromptDrawerRef"
      append-to-body
      :title="$t('largeModel.addTipWord')"
      :visible.sync="isOpenAddPromptDrawer"
      width="550px"
      trigger="click"
      @beforeClose="beforeCloseAddPromptDrawer"
    >
      <template v-slot:aiccMain>
        <AddPrompt
          v-if="isOpenAddPromptDrawer"
          :cur="cur"
          :clickType="clickType"
          ref="addPromptFormRef"
        />
      </template>
      <template v-slot:aiccFooter>
        <el-button size="small" @click="closeAddPromptDrawer">{{$t("aiccCommon.btnCancel") }}</el-button>
        <el-button size="small" type="primary" @click="handlerSave" :loading="isFinished">{{$t("aiccCommon.btnSave") }}</el-button>
      </template>
    </AiccDrawer>
  </div>

</template>


<script>
import {
  modelList,
  modelPromptList,
  modelPromptSaveOrUpdate
} from "@/api/aiccApi/aiccLargeModel";
import AddPrompt from "@/views/aiccFile/largeModelManage/repository/addPrompt.vue";
export default {
  components: {
    AddPrompt
  },
  data(){
    return{
      isFinished:false,
      clickType:'add',
      cur:{},
      isOpenAddPromptDrawer:false,
      form:{
        businessProblem:false,
        notBusinessProblem:false,
        largeModel:'',  //业务的大模型
        temperature:'', //业务的温度
        TopP:'',        //业务的top-p
        tipWord:'',     //业务的提示词
        mode:'',        //业务的模式
        notLargeModel:'', //非业务的大模型
        notTemperature:'', //非业务的温度
        notTopP:'',        //非业务的top-p
        notTipWord:'',     //非业务的提示词
        notMode:'',        //非业务的模式
      },
      rules:{
        largeModel:[
          { required: true, message: this.$t('largeModel.largeModelTips'), trigger: ['change','blur'] },
        ],
        tipWord:[
          { required: true, message: this.$t('largeModel.selectTipWordTips'), trigger: ['change','blur'] },
        ],
        // mode:[
        //   { required: true, message: this.$t('largeModel.selectModeTip'), trigger: ['change','blur'] },
        // ],
        notLargeModel:[
          { required: true, message: this.$t('largeModel.largeModelTips'), trigger: ['change','blur'] },
        ],
        notTipWord:[
          { required: true, message: this.$t('largeModel.selectTipWordTips'), trigger: ['change','blur'] },
        ],
        // notMode:[
        //   { required: true, message: this.$t('largeModel.selectModeTip'), trigger: ['change','blur'] },
        // ],
      },
      largeList:[],
      notLargeList:[],
      wordList:[],
      promptList:[],
      copyList:[
        {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        },
        {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        },
        {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        },
      ],
      modeList:[
        // {
        //   id:'1',
        //   name:this.$t('largeModel.commonMode') //普通模式
        // },
        // {
        //   id:'2',
        //   name:this.$t('largeModel.precision') //精确模式
        // },
        // {
        //   id:'3',
        //   name:this.$t('largeModel.extension') //拓展模式
        // },
      ],
      notModeList:[
        // {
        //   id:'1',
        //   name:this.$t('largeModel.commonMode') //普通模式
        // },
        // {
        //   id:'2',
        //   name:this.$t('largeModel.precision') //精确模式
        // },
        // {
        //   id:'3',
        //   name:this.$t('largeModel.extension') //拓展模式
        // },
      ],
      temperatureMarks:{
        0:'0',
        2:'2'
      },
      topPMarks:{
        0:'0',
        1:'1'
      },
    }
  },



  watch:{
    'form.largeModel':{
      handler(val){
        let that = this;
        const commonMode =   {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        };
        const precisionMode = {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        };
        const extensionMode = {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        };
        that.modeList = [];
        that.form.mode = '';
        setTimeout(()=>{
          const arr = that.largeList.filter(item=>{
            if(item.id == val){
              return item
            }
          });
          if(!arr.length){
            return
          };
          const pattern = arr[0].pattern;
          if(pattern !== null){
            const patternArr = pattern.split(',');
            patternArr.forEach((item)=>{
              if(item == 1){
                that.modeList.push(commonMode)
              }else if (item == 2){
                that.modeList.push(precisionMode)
              }else if (item == 3){
                that.modeList.push(extensionMode)
              }
            })
          }else{
            that.modeList = [];
          }
        },10)
      },
      immediate:true
    },
    'form.notLargeModel':{
      handler(val){
        let that = this;
        const commonMode =   {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        };
        const precisionMode = {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        };
        const extensionMode = {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        };
        that.notModeList = [];
        that.form.notMode = '';

        setTimeout(()=>{
          const arr = that.notLargeList.filter(item=>{
            if(item.id == val){
              return item
            }
          });
          if(!arr.length){
            return
          };
          const pattern = arr[0].pattern;
          if(pattern !== null){
            const patternArr = pattern.split(',');
            patternArr.forEach((item)=>{
              if(item == 1){
                that.notModeList.push(commonMode)
              }else if (item == 2){
                that.notModeList.push(precisionMode)
              }else if (item == 3){
                that.notModeList.push(extensionMode)
              }
            })
          }else{
            that.notModeList = [];
          }
        },10)
      }
    },
    'form.businessProblem':{
      handler(val){
        if(!val){
          this.form.largeModel = '';
          this.form.temperature = '';
          this.form.TopP = '';
          this.form.mode = '';
          this.form.tipWord = '';
        }
      }
    },
    'form.notBusinessProblem':{
      handler(val){
        if(!val){
          this.form.notLargeModel = '';
          this.form.notTemperature = '';
          this.form.notTopP = '';
          this.form.notMode = '';
          this.form.notTipWord = '';
        }
      },
    }
  },

  props:{
    configCur:{
      type:Object,
      default:() => {
        return {}
      }
    },
    clickName:{
      type:String,
      default:() => {
        return ''
      }
    }
  },

  mounted(){
    console.log(this.configCur,'this.configCur')

    this.getModelList();

    this.getPromptList();

    const Data = this.configCur;

    if(Data.businessOpen !== null){
      this.form.businessProblem = Data.businessOpen == 0 ? false : true;
    }else{
      this.form.businessProblem = false;
    }

    if(Data.nonBusinessOpen !== null){
      this.form.notBusinessProblem = Data.nonBusinessOpen == 0 ? false : true;
    }else{
      this.form.notBusinessProblem = false;
    }

    if(Data.businessModel !== null){
      this.form.largeModel = Data.businessModel;
    }else {
      this.form.largeModel = '';
    }

    if(Data.businessTemperature !== null){
      this.form.temperature = Data.businessTemperature*1;
    }else {
      this.form.temperature = 1;
    }

    if (Data.businessTop !== null){
      this.form.TopP = Data.businessTop*1;
    }else {
      this.form.TopP = 0.1;
    }

    if(Data.businessPromat !== null){
      this.form.tipWord = Data.businessPromat;
    }else {
      this.form.tipWord = '';
    }

    if(Data.businessPattern !== null){
      this.form.mode = Data.businessPattern;
    }else {
      this.form.mode = '';
    }

    if(Data.nonBusinessModel !== null){
      this.form.notLargeModel = Data.nonBusinessModel;
    }else {
      this.form.notLargeModel = '';
    }

    if(Data.nonBusinessTemperature !== null){
      this.form.notTemperature = Data.nonBusinessTemperature*1;
    }else {
      this.form.notTemperature = 1;
    }

    if(Data.nonBusinessTop !== null){
      this.form.notTopP = Data.nonBusinessTop*1;
    }else {
      this.form.notTopP = 0.1;
    }

    if(Data.nonBusinessPromat !== null){
      this.form.notTipWord = Data.nonBusinessPromat;
    }else {
      this.form.notTipWord = '';
    }

    if(Data.nonBusinessPattern !== null){
      this.form.notMode = Data.nonBusinessPattern;
    }else {
      this.form.notMode = '';
    }
  },
  methods:{
    //获取模型列表
    getModelList(){
      const info = {
        current:1,
        size:10000,
        name:'',
        type:'',
      };
      modelList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.largeList = Data.records;
          this.notLargeList = Data.records;
          if(this.largeList.length > 0){
            // this.form.largeModel = this.largeList[0].id
          }
          if (this.notLargeList.length > 0) {
            // this.form.notLargeModel = this.notLargeList[0].id
          }
        }
      })
    },

    //获取提示词列表
    getPromptList(){
      const info = {
        type:'',
        isDefault:'',
        name:'',
        current:1,
        size:10000,
        businessType:this.configCur.type,
      };
      modelPromptList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.promptList = Data.records;
          if(this.promptList.length > 0){
            // this.form.tipWord = this.promptList[0].id
            // this.form.notTipWord = this.promptList[0].id
          }
        }
      })
    },

    handlerSave(){
      const component = this.$refs.addPromptFormRef;
      const form = component.form;
      component.$refs.form.validate(valid=>{
        if(!valid){
          return
        }else{
          const info = {
            businessType: form.function,
            name:form.name,
            type:form.function,
            isDefault:form.isDefault,
            pattern:form.pattern,
            isUse:form.isUse*1,
            content:form.tipWord,
            id:form.id?form.id:'',
          };
          this.isFinished = true;
          modelPromptSaveOrUpdate(info).then(res=>{
            if(res.data.code == 200){
              this.closeAddPromptDrawer();
              this.getPromptList();
              this.$message.success(this.$t('aiccCommon.successSave'));
              this.isFinished = false;
            }
          }).catch(()=>{
            this.isFinished = false;
          })
        }
      })
    },



    addTipWord(){
      this.clickType = 'add';
      this.isOpenAddPromptDrawer = true;
      this.cur = {};
      this.$refs.addPromptDrawerRef.open();
      this.isFinished = false;
    },

    closeAddPromptDrawer(){
      this.isOpenAddPromptDrawer = false;
      this.isFinished = false;
      this.cur = {};
      this.$refs.addPromptDrawerRef.close();
    },

    beforeCloseAddPromptDrawer(){
      this.closeAddPromptDrawer()
    },
  },
}
</script>

<style scoped lang="scss">

</style>
